<template>
  <el-dialog
      draggable
      v-model="PassVisible"
      title="修改密码"
      width="30%"
      style="padding-right: 60px;"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
    >
      <el-form-item label="原密码" prop="old">
        <el-input :show-password="true" v-model="ruleForm.old" placeholder="请输入原密码"/>
      </el-form-item>
      <el-form-item label="新密码" prop="pass">
        <el-input :show-password="true" v-model="ruleForm.pass" type="password" placeholder="请输入新密码"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="newPass">
        <el-input
            :show-password="true"
            v-model="ruleForm.newPass"
            type="password"
            autocomplete="off"
            placeholder="请再次输入密码"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="resetForm(ruleFormRef)">清空</el-button>
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineModel, onMounted} from 'vue'
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import api from "@/api";
import {ElMessage} from "element-plus";
import router from "@/router";

const ruleFormRef = ref<FormInstance>()
const PassVisible = defineModel('visible');
const user = ref({});
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
})

const checkOld = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入原密码'))
  }
  callback();
}

const newPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  }
  if (value.length < 6) {
    callback(new Error('密码必须大于6位'))
  } else {
    callback()
  }
}

const checkNewPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次输入的密码不一致!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  old: '',
  pass: '',
  newPass: '',
})

const rules = reactive<FormRules>({
  old: [{validator: checkOld, trigger: 'blur', required: true}],
  pass: [{validator: newPass, trigger: 'blur', required: true}],
  newPass: [{validator: checkNewPass, trigger: 'blur', required: true}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      api.login.chnagePwd(user.value.acc, ruleForm.old, ruleForm.pass).then((res: any) => {
        ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
        if (res.success) {
          router.push("/");
        }
      })
    } else {
      ElMessage({message: '请完善表单！', type: 'error', grouping: true, showClose: true});
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>